<template>
	<!-- 流程节点管理 -->
	<div class="processNodeManagement">
		<div class="title_top">
			<CommonTitle titleName="招标任务实施节点管理"> </CommonTitle>
			<div class="titleRightBtn">
				<el-button class="button_view" @click="addLabelClick">
					<!-- <el-icon style="margin-right: 5px; margin-top: 2px"><Plus /></el-icon> -->
					<svg-icon icon-class="project-detail-icon-l-03" class="icon" />
					新增标签</el-button
				>
			</div>
		</div>

		<div class="labelNameB">
			<div class="labelItem" v-for="item in state.allNodes" :key="item.nodeId">
				<div class="label_I_Name">{{ item.nodeName }}</div>
				<div class="label_I_Icon">
					<svg-icon
						@click="handleRemoveNode(item.nodeId)"
						icon-class="project-detail-icon-l-delete"
						class="icon"
					/>
				</div>
			</div>
		</div>

		<!-- 新增标签弹窗 -->
		<AddLabel ref="addLabelRef" @initAllNodeData="initAllNodeData"></AddLabel>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import AddLabel from "./components/AddLabelDialog.vue";
import { processApi } from "@/api/biddingProject";
import { ElMessage } from "element-plus";

const state = reactive({
	allNodes: [],
});

// 获取所有节点信息
const initAllNodeData = () => {
	processApi.getAllNodes().then((res) => {
		if (res.code === "200") {
			state.allNodes = res.data;
		}
	});
};

// 删除节点
const handleRemoveNode = (nodeId) => {
	if (nodeId) {
		processApi.removeNode(nodeId).then((res) => {
			if (res.code === "200") {
				ElMessage.success("删除节点成功!");
				initAllNodeData();
			}
		});
	}
};

// 弹出层
const addLabelRef = ref(null);

const addLabelClick = () => {
	addLabelRef.value.open();
};

onMounted(() => {
	initAllNodeData();
});
</script>
<style lang="scss" scoped>
.processNodeManagement {
	.title_top {
		display: flex;
		justify-content: space-between;
	}
	.titleRightBtn {
		margin-right: 30px;
		.el-button {
			color: #ffffff;
		}
	}
	.labelNameB {
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		.labelItem {
			display: flex;
			width: 309px;
			height: 42px;
			background: #ffffff;
			border-radius: 6px;
			border: 1px solid #1a1a1a;
			line-height: 42px;
			text-align: center;
			margin: 0 53px 32px 0;

			.label_I_Name {
				width: 287px;
				font-size: 14px;

				font-weight: 400;
				color: #1a1a1a;
			}
			.label_I_Icon {
				width: 42px;
				height: 42px;
				cursor: pointer;
			}
		}
		// .labelItem:nth-child(4n) {
		//     margin-right: 0;
		// }
	}
}
</style>
